<template>
  <div class="album">
    <!-- 头部 -->
    <div class="album-top">
      <!-- icon -->
      <router-link to="/">
        <img class="icon-img"
          src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp">
      </router-link>

      <!-- 跳转App -->
      <div class="top-button">打开</div>
    </div>

    <!-- 标题 -->
    <div class="album-title">
      <div class="box1"
        :style="{ 'background-image': ` url(//imagev2.xmcdn.com/${albumTitle?.albumDetailInfo.albumInfo.cover}` }"></div>
      <div class="box2">
        <!-- 标题图片 -->
        <div class="album-title-icon">
          <div class="icon-1">
            <img :src="`//imagev2.xmcdn.com/${albumTitle?.albumDetailInfo.albumInfo.cover}`">
          </div>

          <img class="icon-2"
            src="//s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/listen_pic_album@3x_d18f4f7.png">
          <div class="listen-count">
            <span>
              <svg t="1694831139450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="24734" width="16">
                <path
                  d="M977.053538 600.851692c0-272.226462-206.060308-495.300923-461.115076-495.300923S52.617846 328.625231 52.617846 600.851692a539.136 539.136 0 0 0 34.028308 189.046154 189.046154 189.046154 0 0 0 172.032 128.551385 41.944615 41.944615 0 0 0 41.590154-41.590154v-236.307692a41.944615 41.944615 0 0 0-41.590154-41.590154 188.612923 188.612923 0 0 0-111.537231 37.809231 253.361231 253.361231 0 0 1-1.890461-37.809231C145.250462 375.886769 311.611077 196.135385 515.938462 196.135385s370.215385 181.641846 370.215384 402.825846a241.033846 241.033846 0 0 1-1.890461 37.809231 174.395077 174.395077 0 0 0-111.537231-39.699693 41.944615 41.944615 0 0 0-41.590154 41.590154v234.417231a41.944615 41.944615 0 0 0 41.590154 41.590154 165.415385 165.415385 0 0 0 122.88-51.2 267.815385 267.815385 0 0 0 60.494769-117.208616 520.822154 520.822154 0 0 0 20.952615-145.408z"
                  fill="#ffffff" p-id="24735"></path>
              </svg>
            </span>
            <span>{{ listenCount }}亿</span>
          </div>
        </div>

        <!-- 标题内容  -->
        <div class="album-info">
          <h1 class="info-content">{{ albumTitle?.albumDetailInfo.albumInfo.title }}</h1>
          <a class="info-author">
            <img
              :src="`//imagev2.xmcdn.com/${albumInfo?.userInfo.logo}`">
            <div>老彩故事会</div>
          </a>
          <div class="author-fans">已订阅{{ subscribe }}万人</div>
        </div>
      </div>
    </div>

    <!-- 介绍 -->
    <div class="album-content">
      <div class="content-value" :style="isShow ? 'height: 160px;' : 'height:100%;'">
        <span v-html="albumTitle?.albumRichInfo.richIntro" class="content-value-span"></span>
      </div>
      <div v-if="isShow" class="mask">
        <div class="mask-icon" @click="showContent">
          <svg t="1694824840657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2246" width="20">
            <path d="M0 0h1024v1024H0z" fill="#f86442" fill-opacity="0" p-id="2247"></path>
            <path
              d="M744.457 268.228l32.458 48.687L497.37 503.277 217.828 316.915l32.458-48.687 247.085 164.724 247.086-164.724z m0 234.057l32.458 48.687L497.37 737.334 217.828 550.972l32.458-48.687L497.371 667.01l247.086-164.724z"
              fill="#f86442" p-id="2248"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- 跳转App -->
    <div class="toApp">
      <span>
        打开APP，完整收听
      </span>
    </div>

    <!-- 节目 -->
    <div class="program">
      <div class="program-title">
        <h2 class="title-name">节目({{ totalCount }})</h2>
        <span class="change-order" @click="changeAsc">
          <svg t="1670814794897" class="icon-paixu T_r" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" width="16" height="12">
            <path
              d="M420.559974 72.98601l-54.855 0 0 774.336c-52.455014-69.163008-121.619046-123.762995-201.120051-157.052006l0 61.968c85.838029 41.401958 156.537958 111.337984 201.120051 198.221005l0 0.208 54.855 0 0-13.047c0.005018-0.00297 0.010035-0.005018 0.01495-0.007987-0.005018-0.010035-0.010035-0.019968-0.01495-0.030003L420.559974 72.986zM658.264986 73.385984l0-0.4L603.41 72.985984l0 877.68 54.855 0L658.265 176.524c52.457984 69.178982 121.632051 123.790029 201.149952 157.078016l0-61.961C773.560013 230.238003 702.853018 160.287027 658.264986 73.385984z"
              fill="#999999">
            </path>
          </svg>
          切换顺序
        </span>
      </div>

      <div class="program-item" v-for="item in programList?.trackDetailInfos" :key="item.id">
        <van-icon name="play-circle-o" color="#999999" />
        <span>{{ item.trackInfo.title }}</span>
        <svg t="1694749880130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4038" width="16">
          <path
            d="M914.28 98.23h-234.7c-25.39 0-45.97 20.59-45.97 45.97s20.59 45.97 45.97 45.97H868.3v643.65H155.7V190.18h199.5c25.39 0 45.97-20.59 45.97-45.97s-20.59-45.97-45.97-45.97H109.72c-25.39 0-45.97 20.59-45.97 45.97v735.6c0 25.39 20.59 45.97 45.97 45.97h804.56c25.39 0 45.97-20.59 45.97-45.97V144.2c0-25.39-20.58-45.97-45.97-45.97z"
            fill="#999999" p-id="4039">
          </path>
          <path
            d="M324.46 351.38c-17.96-17.96-47.05-17.96-65.01 0-17.96 17.95-17.96 47.06 0 65.01l162.73 162.73c23.98 24 55.9 37.22 89.82 37.22 33.94 0 65.86-13.22 89.84-37.22l162.73-162.73c17.96-17.95 17.96-47.06 0-65.01-17.96-17.96-47.05-17.96-65.01 0L554.13 496.8a45.912 45.912 0 0 0 3.84-18.4V144.2c0-25.39-20.59-45.97-45.97-45.97s-45.97 20.59-45.97 45.97v334.2c0 6.53 1.37 12.73 3.82 18.36L324.46 351.38z"
            fill="#999999" p-id="4040">
          </path>
        </svg>
      </div>

      <div class="load-more" @click="loadMoreProgram">
        <span>加载更多</span>
        <van-icon name="arrow-down" />
      </div>
    </div>

    <!-- 主播信息 -->
    <div class="anchor">
      <h2>主播信息</h2>
      <div class="anchor-info">
        <!-- 主播头像 -->
        <router-link to="/">
          <img class="anchor-img"
            :src="`//imagev2.xmcdn.com/${albumInfo?.userInfo.logo}`"
            alt="">
          <!-- `//imagev2.xmcdn.com/${albumInfo?.userInfo.logo}` -->
          <div class="anchor-level">V{{ albumInfo?.userInfo.anchorGrade }}</div>
        </router-link>
        <!-- 主播详情 -->
        <div class="anchor-details">
          <!-- 主播名字 -->
          <div class="anchor-id">{{ albumInfo?.userInfo.nickname }}</div>
          <!-- 主播简介 -->
          <div class="anchor-intro">{{ albumInfo?.userInfo.personalSignature }}</div>
          <!-- 粉丝量 -->
          <div class="fans">
            <svg t="1694762881599" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="144425" data-spm-anchor-id="a313x.search_index.0.i35.c4ae3a81eXOAIo" width="14">
              <path
                d="M460.8 614.4a307.2 307.2 0 1 1 307.2-307.2 307.2 307.2 0 0 1-307.2 307.2z m0-64A243.2 243.2 0 1 0 217.6 307.2 243.2 243.2 0 0 0 460.8 550.4z"
                fill="#bfbfbf" p-id="144426" data-spm-anchor-id="a313x.search_index.0.i36.c4ae3a81eXOAIo" class=""></path>
              <path
                d="M0 1024a460.8 460.8 0 0 1 921.6 0h-64a396.8 396.8 0 0 0-793.6 0zM768 563.2v-12.8a243.2 243.2 0 0 0 0-486.4V0a307.2 307.2 0 0 1 135.168 583.168A460.8 460.8 0 0 1 1228.8 1024h-64A396.8 396.8 0 0 0 768 627.2z"
                fill="#bfbfbf" p-id="144427" data-spm-anchor-id="a313x.search_index.0.i34.c4ae3a81eXOAIo" class=""></path>
            </svg>
            <span class="fans-count">{{ fans }}万</span>
          </div>
        </div>
        <!-- 关注 -->
        <div class="add-attention">
          <svg t="1694763152780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="155379" width="36">
            <path
              d="M857.6 683.52h-81.92v-81.92c0-23.04-17.92-43.52-43.52-43.52-23.04 0-43.52 20.48-43.52 43.52v81.92h-81.92c-23.04 0-43.52 17.92-43.52 43.52 0 23.04 20.48 43.52 43.52 43.52H691.2v81.92c0 23.04 17.92 43.52 43.52 43.52 23.04 0 43.52-20.48 43.52-43.52V768h81.92c23.04 0 43.52-17.92 43.52-43.52-2.56-23.04-23.04-40.96-46.08-40.96z m0 0"
              fill="#f86442" p-id="155380"></path>
            <path
              d="M547.84 806.4H220.16c15.36-107.52 89.6-199.68 192-238.08 23.04 7.68 48.64 12.8 74.24 12.8 125.44 0 227.84-102.4 227.84-227.84s-102.4-227.84-227.84-227.84-227.84 102.4-227.84 227.84c0 61.44 25.6 120.32 69.12 163.84-107.52 61.44-176.64 168.96-189.44 289.28h-5.12v43.52c0 23.04 20.48 43.52 43.52 43.52h371.2c23.04 0 43.52-17.92 43.52-43.52-2.56-23.04-20.48-43.52-43.52-43.52zM483.84 209.92c79.36 0 143.36 64 143.36 143.36 0 79.36-64 143.36-143.36 143.36-79.36 0-143.36-64-143.36-143.36 0-79.36 66.56-143.36 143.36-143.36z m0 0"
              fill="#f86442" p-id="155381" data-spm-anchor-id="a313x.search_index.0.i41.c4ae3a81eXOAIo" class="selected">
            </path>
          </svg>
          <span>加关注</span>
        </div>
      </div>
      <!-- 主播作品 -->
      <div class="works">
        <el-col class="l-item" :span="8" v-for="item in anchorWork" :key="item.id" @click="toAlbum(item.albumInfo.id)">
          <div class="l-img">
            <img :src="`//imagev2.xmcdn.com/` + item.albumInfo.cover" alt="">
            <div class="icon">
              <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
              {{ item.statCountInfo.playCount }}
            </div>
          </div>
          <p class="l-title">{{ item.albumInfo.title }}</p>
        </el-col>

        <!-- <listen-list></listen-list> -->
      </div>
    </div>

    <!-- 用户评论 -->
    <div class="comment">
      <h2 class="comment-title">用户评论</h2>
      <div class="comment-content">

        <div class="comment-item" v-for="item in albumComment" :key="item.id">
          <img :src="`https://imagev2.xmcdn.com/${item.smallHeader}`" class="userImg" />
          <div class="user-info">
            <div class="userId">{{ item.nickname }}</div>
            <div class="user-comment" v-html="item.content"></div>
            <div class="comment-info">
              <div>
                <span class="reply">回复</span>
                <span>2022-02-21</span>
              </div>
              <div class="like-count">
                <div>51</div>
                <svg t="1694778767928" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="166632" width="18" height="18">
                  <path
                    d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z"
                    fill="#bfc0bf" p-id="166633" data-spm-anchor-id="a313x.search_index.0.i48.c4ae3a81eXOAIo"
                    class="selected"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="more-comment" @click="moreComment">查看更多评论</div>
    </div>

    <!-- 相似专辑 -->
    <div class="similar-albums">
      <h2>相似专辑</h2>
      <div class="l-list">
        <el-col class="l-item" :span="8" v-for="item in similarAlbums" :key="item.id" @click="toAlbum(item.albumId)">
          <div class="l-img">
            <img :src="`//imagev2.xmcdn.com/` + item.coverPath" alt="">
            <div class="icon">
              <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
              {{ item.playCount }}
            </div>
          </div>
          <p class="l-title">{{ item.title }}</p>
        </el-col>
      </div>

      <div class="change-batch" @click="changeAlbumList">
        <svg t="1694781840924" class="icon" viewBox="0 0 1251 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="169351" height="12">
          <path
            d="M625.777778 917.162667a394.808889 394.808889 0 0 1-329.557334-178.858667H191.886222A483.953778 483.953778 0 0 0 625.777778 1007.388444a489.130667 489.130667 0 0 0 483.384889-450.56h90.225777l-132.437333-179.882666-132.437333 179.882666h86.016A399.928889 399.928889 0 0 1 625.777778 917.162667z m0-900.551111a488.106667 488.106667 0 0 0-477.127111 405.162666H52.167111l132.437333 180.451556 132.437334-180.451556H238.364444A399.473778 399.473778 0 0 1 625.777778 108.885333a393.671111 393.671111 0 0 1 299.349333 138.752l17.180445-4.209777h89.713777A481.28 481.28 0 0 0 625.777778 16.611556z"
            fill="#ffffff" p-id="169352" data-spm-anchor-id="a313x.search_index.0.i52.c4ae3a81eXOAIo" class="selected">
          </path>
        </svg>
        <span>换一批</span>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="guess-like">
      <h2 class="guess-title">猜你喜欢</h2>

      <div class="guess-item" >
        <div class="item" v-for="item in guessLikeList" :key="item.id" @click="toAlbum(item.albumId)">
          <img :src="`//imagev2.xmcdn.com/${item.albumCoverPath}`" class="img" >
          <div class="content">
            <div class="title">{{ item.albumTitle }}</div>
            <div class="neirong">专辑播放量超{{ item.albumPlayCount }}</div>
            <div class="sum">
              <span class="number">▷{{ item.albumPlayCount }}</span>
              <span class="">
                <svg t="1694740463714" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="8758" width="16" height="12">
                  <path
                    d="M512 128a32 32 0 0 1 32 32v704a32 32 0 1 1-64 0v-704A32 32 0 0 1 512 128zM320 256a32 32 0 0 1 32 32v448a32 32 0 1 1-64 0v-448A32 32 0 0 1 320 256z m384 0a32 32 0 0 1 32 32v448a32 32 0 1 1-64 0v-448A32 32 0 0 1 704 256z m192 128a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0v-192A32 32 0 0 1 896 384zM128 384a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0v-192A32 32 0 0 1 128 384z"
                    fill="#999" p-id="8759"></path>
                </svg>
                <span>{{ item.albumTrackCount }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="look-more" @click="moreLike">查看更多 ></div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <img class="f-img"
        src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png">
      <div class="copyright">© 2014--2023 喜马拉雅 版权所有</div>
    </div>

    <!-- 购买 -->
    <div class="buy">
      <div class="buy-gather">
        <span class="gather">购买已更全集 </span>
        <span class="price-icon">￥</span>
        <span class="price">148.05</span>
      </div>
      <div class="buy-vip">6元开会员 免费听</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import listenList from '@/components/listen-list/index.vue'
import albumApi from '@/api/album/index'
import { onMounted, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const size = ref(10)
const asc = ref(true)
const commentSize = ref(6)
const page = ref(1)
const LikeSize = ref(5)

const albumTitle = ref() //头部数据
const listenCount = ref() //收听次数
const subscribe = ref() //关注人数
const programList = ref() //节目列表
const totalCount = ref<number>() //节目数量
const albumId = ref<number>() //作者ID
const albumInfo = ref() //作者信息
const fans = ref() //关注人数
const anchorWork = ref() //主播作品
const albumComment = ref() //用户评论
const similarAlbums = ref() //相似专辑
const guessLikeList = ref() //猜你喜欢
const isShow = ref(true)
const shangpinId:any = ref(
  route.params.id
)
// const 

//猜你喜欢跳转
const toAlbum= async(id:any)=>{
  console.log(id);
  router.push({
    name:'Album',
    params:{
      id
    }
  })
  await getProgramList()
  router.go(0)
}



// 标题信息
const getAlbumTitle = async () => {
  let result: any = await albumApi.reqAlbumTitle(shangpinId.value)
  albumTitle.value = result
  // console.log(albumTitle.value);
  
  listenCount.value = (result.albumDetailInfo.statCountInfo.playCount / 100000000).toFixed(2)
  subscribe.value = (result.albumDetailInfo.statCountInfo.subscribeCount / 10000).toFixed(2)

  albumId.value = result.anchorId

  // console.log(albumId);

  // console.log(result);
}

// 节目列表信息
const getProgramList = async () => {
  let result: any = await albumApi.reqProgramList(shangpinId.value, size.value, asc.value)
  programList.value = result
  totalCount.value = result.totalCount
  // console.log(result);

}

const loadMoreProgram = () => {
  size.value += 10
  getProgramList()
}

const changeAsc = () =>{
  asc.value = !asc.value
  getProgramList()
}

//作者信息
const getAlbumInfo = async () => {
  let result: any = await albumApi.reqAlbumInfo(albumTitle.value.anchorId)


  // console.log(result)

  fans.value = (result.statCountInfo?.followerCount / 10000).toFixed(2)
  albumInfo.value = result
}

//作者作品
const getAnchorWork = async () => {
  let result: any = await albumApi.reqAnchorWork(albumTitle.value.anchorId)

  anchorWork.value = result.albumBriefDetailInfos

  // console.log(anchorWork.value);
}

//用户评论
const getAlbumComment = async () => {
  let result: any = await albumApi.reqAlbumComment(shangpinId.value,commentSize.value)

  albumComment.value = result.comments
}

const moreComment = () => {
  commentSize.value += 6 
  getAlbumComment()
}

//相似专辑
const getSimilarAlbums = async () => {
  let result: any = await albumApi.reqSimilarAlbums(albumTitle.value.albumDetailInfo.albumInfo.title, page.value)
  // console.log(result);

  similarAlbums.value = result.album.docs

  
}

const changeAlbumList = () => {
  page.value += 1
  getSimilarAlbums()
}

//猜你喜欢
const getGuessLike = async () => {
  let result: any = await albumApi.reqGuessLike(LikeSize.value)

  guessLikeList.value = result.albums
  // console.log(guessLikeList.value);
  
}

const moreLike = () => {
  LikeSize.value += 5
  getGuessLike()
}




// 是否展示信息
const showContent = () => {
  isShow.value = false
}


onMounted(async () => {
  await getAlbumTitle()
  getProgramList()
  getAlbumInfo()
  getAnchorWork()
  getAlbumComment()
  getSimilarAlbums()
  getGuessLike()
})
</script>

<style lang="scss"  >
// img{
//   max-width: 100%;
// }
.album {
  width: 100%;
  margin: 0;
  padding: 0;

  // 头部
  .album-top {
    display: flex;
    justify-content: space-between;
    padding: 12px 10px 0;
    background-color: #4c4d4f;

    .icon-img {
      width: 100px;
    }

    .top-button {
      width: 30px;
      height: 6px;
      line-height: 6px;
      text-align: center;
      border-radius: 20px;
      background-color: #f86442;
      font-size: 14px;
      color: #fff;
      padding: 10px 12px;
    }
  }

  // 标题
  .album-title {
    color: #fff;

    .box1 {
      width: 100%;
      height: 120px;
      margin-top: 28px;
      float: left;
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      -webkit-filter: blur(50px);
      filter: blur(50px);
    }

    .box2 {
      width: 335px;
      display: flex;
      position: absolute;
      background: rgba(0, 0, 0, 0.3);
      padding: 30px 20px;

      .album-title-icon {
        display: flex;

        .listen-count {
          position: absolute;
          bottom: 0;
          margin-bottom: 40px;
          margin-left: 20px;

          // height: 20px;
          // line-height: 15px;
          // align-items: center;
          span {
            font-size: 12px;
            font-weight: bold;
          }
        }

        .icon-1 {
          img {
            width: 90px;
            border-radius: 5px;
          }
        }

        .icon-2 {
          width: 20px;
          height: 90px;
        }
      }

      .album-info {
        font-size: 8px;
        margin-top: -12px;

        .info-content {
          font-weight: 500;
          display: -webkit-box;
          -webkit-box-orient: vertical; //方向
          -webkit-line-clamp: 2; //设置在第几行添加省略号
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }

        .info-author {
          display: flex;
          align-items: center;
          // width: 220px;
          border-bottom: 1px solid #ccc;
          padding-bottom: 5px;
          margin-bottom: 5px;

          img {
            width: 20px;
            border-radius: 50%;
            margin-right: 5px;
          }
        }

        .author-fans {
          font-size: 12px;
        }
      }
    }
  }

  // 介绍
  .album-content {
    width: 100%;
    padding: 15px 0;
    overflow: hidden;
    position: relative;

    .content-value {
      // padding: 0 15px;

      width: 100%;
      height: 100%;
      img{
        max-width: 100%;
      }
    }

    .mask {
      position: absolute;
      top: 0;
      width: 100%;
      height: 220px;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(34%, rgba(255, 255, 255, 0.8)), color-stop(66%, rgba(255, 255, 255, 0.95)), to(#fff));
      background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 34%, rgba(255, 255, 255, 0.95) 66%, #fff 100%);

      .mask-icon {
        width: 100%;
        text-align: center;
        margin-top: 140px;
      }
    }
  }

  // 跳转APP
  .toApp {
    background-color: #f96948;
    width: 220px;
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    padding: 10px 0;
    font-size: 14px;
    color: #fff;
  }

  // 节目
  .program {
    padding: 0 15px;

    .program-title {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .change-order {
        font-size: 14px;
        color: #b5b5b5;
      }
    }

    .program-item {
      display: flex;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #f3f4f5;

      span {
        width: 240px;
        font-size: 15px;
        margin-left: 10px;
        margin-right: 50px;
        display: -webkit-box;
        -webkit-box-orient: vertical; //方向
        -webkit-line-clamp: 2; //设置在第几行添加省略号
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }

    .load-more {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      color: #f86b4a;
      margin-top: 20px;
    }
  }

  // 主播信息
  .anchor {
    padding: 0 15px;

    h2 {
      font-size: 18px;
    }

    .anchor-info {
      display: flex;
      position: relative;
      height: 70px;
      margin-bottom: 20px;

      .anchor-img {
        width: 54%;
        border-radius: 50%;
      }

      .anchor-level {
        position: absolute;
        bottom: 0;
        margin-left: 18px;
        margin-bottom: 4px;
        width: 26px;
        height: 16px;
        line-height: 16px;
        border-radius: 10px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background-color: #36d6fb;
      }

      .anchor-details {
        margin-left: -30px;
        margin-right: 80px;
        width: 160px;

        .anchor-id {
          font-size: 16px;
        }

        .anchor-intro {
          font-size: 12px;
          color: #999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .fans-count {
          font-size: 12px;
          margin-left: 5px;
          color: #c0c0c0;
        }
      }

      .add-attention {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 12px;
        color: #f86442;

        span {
          margin-left: -4px;
        }
      }
    }
  }

  // 用户评论
  .comment {
    padding: 0 15px;

    .comment-title {
      font-size: 18px;
    }

    .comment-content {
      .comment-item {
        display: flex;
        margin-bottom: 30px;

        .userImg {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .user-info {
          font-size: 14px;
          width: 301px;

          .userId {
            color: #848484;
            width: 301px;
            margin-bottom: 5px;
          }

          .user-comment {
            color: #4c4c4c;
            width: 301px;
            margin-bottom: 12px;
          }

          .comment-info {
            display: flex;
            width: 301px;
            justify-content: space-between;
            height: 12px;
            line-height: 12px;

            div {
              color: #676767;
              font-size: 12px;

              .reply {
                margin-right: 5px;
              }
            }

            .like-count {
              width: 36px;
              height: 20px;
              line-height: 20px;
              color: #848484;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }

    .more-comment {
      text-align: center;
      color: #fe7c5e;
      font-size: 14px;
      margin-bottom: 60px;
    }
  }

  // 相似专辑
  .similar-albums {
    padding: 0 15px;

    h2 {
      font-size: 18px;
    }

    .l-list {
      display: flex;
      flex-wrap: wrap;

      .l-item {
        text-align: center;

        .l-img {
          position: relative;

          img {
            width: 100px;
            border-radius: 5px;
          }

          .icon {
            position: absolute;
            bottom: 5px;
            left: 15px;
            font-size: 12px;
            color: #fff;
            align-items: center;

            .v-icon {
              background-color: rgba(0, 0, 0, .2);
              border-radius: 50%;
            }
          }
        }

        .l-title {
          font-size: 12px;
          color: #626262;
          margin: 0;
          padding: 0;
          padding: 0 5px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-bottom: 20px;
          text-align: left;
          width: 80px;
          margin-left: 12px;
        }
      }
    }

    .change-batch {
      width: 80px;
      text-align: center;
      margin: 0 auto;
      background-color: #f24821;
      border-radius: 20px;
      font-size: 14px;
      color: #fff;
      padding: 6px 0;

      span {
        margin-left: 2px;
      }
    }
  }

  // 猜你喜欢
  .guess-like {
    padding: 0 15px;

    .guess-title {
      font-size: 18px;
      margin-bottom: 0;
    }

    .item {
      // background-color: #1bc841;
      background-color: #fff;
      border-bottom: 1px solid #f8f8f8;
      width: 100%;
      padding: 15px 10px 15px 0px;
      display: flex;

      // width: auto;
      .img {
        // width: 85px;
        height: 70px;
        display: block;
        margin-right: 15px;
        border-radius: 5px;
      }

      .content {
        .title {
          font-size: 15px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .neirong {
          color: #ababab;
          font-size: 13px;
          margin: 5px 0 7px;
        }

        .sum {
          font-size: 11px;
          color: #999999;
          line-height: 1.45;
          white-space: nowrap;

          .icon {
            margin-right: 5px;
          }

          .number {
            margin-right: 10px;
          }
        }
      }
    }

    .look-more {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      color: #f86442;
      margin-top: 20px;
    }
  }

  // 底部
  .footer {
    display: block;
    width: 100%;
    height: 180px;
    background-image: url('https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 70px;
    text-align: center;
    position: relative;

    .f-img {
      width: 104px;
      position: absolute;
      bottom: 120px;
      left: 135px;
    }

    .copyright {
      font-size: 12px;
      color: #888;
      position: absolute;
      bottom: 78px;
      left: 95px;
    }
  }

  .buy {
    position: fixed;
    bottom: 0;
    display: flex;
    height: 54px;
    align-items: center;
    text-align: center;
    width: 100%;

    .buy-gather {
      width: 50%;
      height: 100%;
      line-height: 54px;
      font-size: 14px;
      background-color: #fff;

      .gather {
        color: #373737;
      }

      .price-icon {
        color: #f97b5e;
      }

      .price {
        color: #f97b5e;
        font-size: 18px;
        font-weight: 550;
      }
    }

    .buy-vip {
      width: 50%;
      font-size: 15px;
      height: 100%;
      line-height: 54px;
      color: #9b7b55;
      background-image: linear-gradient(125deg, #ffdebe 0, #f3cba6 46%, #dca574 100%);
    }
  }
}


.works {
  display: flex;

  .l-item {
    text-align: center;

    .l-img {
      position: relative;

      img {
        width: 80px;
        border-radius: 5px;
      }

      .icon {
        position: absolute;
        bottom: 5px;
        left: 15px;
        font-size: 12px;
        color: #fff;
        align-items: center;

        .v-icon {
          background-color: rgba(0, 0, 0, .2);
          border-radius: 50%;
        }
      }
    }

    .l-title {
      font-size: 12px;
      color: #626262;
      margin: 0;
      padding: 0;
      padding: 0 5px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 20px;
      text-align: left;
      width: 80px;
      margin-left: 12px;
    }
  }
}</style>